<template>
  <div class="Home">
    <HeaderVue title="Home"></HeaderVue>
    <div class="flex-col flex-1 center">
      <div class="w-[50%] h-fit p-8">
        <div class="grid grid-cols-3 mt-8 w-full gap-4">
          <div v-for="item in routerList" class="card" @click="gotoPath(item)">
            <div>
              <component class="text-24 mb-8" :is="item.icon" />
            </div>
            <a target="_blank text-24">{{ t(item.name) }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderVue from '@/components/Header.vue';
import router from '@/router';
import { openLink } from '@/utils/common/utils';
import { AppstoreFilled, DatabaseOutlined, SettingOutlined } from '@ant-design/icons-vue';

interface IRouter {
  name: string;
  path: string;
  type: 'router' | 'iframe';
  icon: any;
}
const { t } = useI18n();

const routerList: IRouter[] = [
  {
    name: 'Management system',
    path: 'http://localhost:9999/#/',
    type: 'iframe',
    icon: AppstoreFilled,
  },
  {
    name: 'Station tool',
    path: '/station',
    type: 'router',
    icon: SettingOutlined,
  },

  {
    name: 'Data Connection',
    path: '/connection',
    type: 'router',
    icon: DatabaseOutlined,
  },
];

const gotoPath = (item: IRouter) => {
  if (item.type === 'router') {
    router.push(item.path);
  } else {
    openLink(item.path);
  }
};
</script>

<style lang="scss" scoped>
.Home {
  @apply h-screen flex flex-col bg-[#E1E3E5];
  h1 {
    font-size: 32px;
  }

  .card {
    @apply px-4 py-8 cursor-pointer text-center bg-white;
    a {
      font-size: 20px;
      color: black;
    }
  }
}
</style>
